<template>
    <div class="switch" :class="{open:value,close:!value}" @click="sw">
        <div class="ball" ></div>
    </div>
</template>

<script>
    export default {
        props:{
            value:{
                type:Boolean,
                default:false
            },
            disabled:{
                type:Boolean,
                default: false
            }
        },
        data(){
          return{
              open:this.value
          }
        },
        methods:{
            sw(){
                if(this.disabled){
                    return
                }
                this.$emit("input",!this.value)

                // this.open=!this.open
            }
        },
        watch:{
            open(val){
                this.$emit("input",val)
            }
        }
    }
</script>

<style scoped lang="stylus">

    @keyframes openColor{
        0% {
            background-color rgba(226,225,225,1);

        }
        100% {
            background-color rgba(247,137,94,1);
        }
    }

    @keyframes closeColor{
        0% {
            background-color rgba(247,137,94,1);
        }
        100% {
            background-color rgba(226,225,225,1);
        }
    }

    @keyframes open{
        0% {
            transform translateX(0px)

        }
        90% {
            transform translateX(18px)
        }
        100% {
            transform translateX(15px)

        }
    }

    @keyframes close{
        0% {
            transform translateX(15px)
        }
        90% {
         transform translateX(-3px)
        }
        100% {
         transform translateX(0)
        }
    }

    .switch
        position relative
        width 35px
        height 20px
        background-color #C5C3C3
        border-radius 20px
        border 1Px solid #C5C3C3
        &.open
            animation openColor .4s forwards
            .ball
                animation open .4s forwards
        &.close
            animation closeColor .4s forwards
            .ball
                animation close .4s forwards
        .ball
            border-radius 20px
            background white
            width 20px
            height 20px
            position absolute
            left 0
            bottom 0

</style>